<template>
  <div class="discover">
    <div class="discover-header">
      <div class="discover-header-inner">
        <a class="discover-header-inner-left active">资讯</a>
        <a href="../bbs/page.html" class="discover-header-inner-right">论坛</a>
      </div>
    </div>
    
    <div class="selectedA" style="text-align:center;">
      <div class="selectedA-banner">
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="(item,index) in bannerList" :key="index"><img :src='item.titleImg' @click="goBanner(item.url)" /></mt-swipe-item>
        </mt-swipe>
        <div class="selectedA-banner-nav">
            <ul>
                <li v-for="(item,index) in navList" :key="index" @click="goPage(item.url,index+1)">
                    <div class="selectedA-banner-nav-img">
                        <img :src="item.imgUrl" />
                    </div>
                    <p>{{item.name}}</p>
                </li>
            </ul>
        </div>
      </div>
      <div class="selectedA-discussSelected">一 资讯精选 一</div>
      <div class="selectedA-content">
        <div class="selectedA-content-item" @click="goArtical(item.id)" v-for="(item,index) in selectedList" :key="index">
            <div class="selectedA-content-item-left">
                <img :src="item.img||item.imgUrl" />
            </div>
                <div class="selectedA-content-item-right">
                    <h3 class="selectedA-container-title">{{item.title}}</h3>
                    <p class="selectedA-container-word">{{item.detail}}</p>
                    <ul class="opera-group">
                        <li class="opera-group-item opera-group-time">
                            {{item.create_time | ymd}}
                        </li>
                        <li class="opera-group-item opera-group-icon opera-group-view">
                            {{item.readsCount}}
                        </li>
                        <li @click="dianzan(item)" class="opera-group-item opera-group-icon opera-group-zan">
                            {{item.favorCount}}
                        </li>
                        <li @click="shoucang(item)" class="opera-group-item opera-group-icon opera-group-sc">
                            {{item.collectCount}}
                        </li>
                    </ul>
                </div>
        </div>
      </div>
     <loading title="加载中..."  v-if="loadMoreShow"></loading>
     <Nomore v-if="noMoreShow"></Nomore>
    </div>
    <Foot aIndex="2"></Foot>
  </div>
</template>

<script>
import Vue from 'vue'
import "../../../js/lib/flexble.js";
import util from "../../../js/lib/util.js";
import commons from "../../../common/js/common.js";
import Top from "components/Header/Header";
import Foot from "components/Footer/Footer";
import { Swipe, SwipeItem, MessageBox,Indicator } from "mint-ui";

export default {
  name: "news",
  components: { Top, Foot },
  data() {
    return {
      bannerList: [],
      navList: [
        {
          name: "行业资讯",
          imgUrl: "../../../../static/img/tiemmiaozhao.png",
          url: "/method"
        },
        {
          name: "贷款知识",
          imgUrl: "../../../../static/img/daiuanjiqiao.png",
          url: "/method"
        },
        {
          name: "用卡常识",
          imgUrl: "../../../../static/img/daikuanwenda.png",
          url: "/method"
        },
        {
          name: "防骗课堂",
          imgUrl: "../../../../static/img/zhimatifen.png",
          url: "/method"
        }
      ],
      loadMoreShow: false,
      noMoreShow: false,
      flag: true,
      selectedList: [],
      pageNum: 1
    };
  },
  filters: {
    ymd(val) {
      return commons.ymd(val);
    },
    isNull(val) {
      return val ? val : 0;
    }
  },
  created() {
    var _this = this;
    this.$nextTick(function() {
      window.addEventListener("scroll", onScroll);
    });
    // 判断滚动条位置，加载更多
    function onScroll() {
      var scrollTop = document.body.scrollTop;
      var innerHeight = window.innerHeight;
      var offsetHeight = document.body.offsetHeight;
      if (scrollTop + innerHeight >= offsetHeight) {
        if (_this.flag) {
          if (_this.selectedList.length >= 6) {
            _this.flag = false;
            _this.getList();
          }
        }
      }
    }
  },
  mounted() {
    Vue.http.interceptors.push((request, next) => { //请求拦截器
      //请求前
      request.headers.set('token', commons.getCookie('token')); //设置请求头
      Indicator.open('加载中...'); //请求loading
      next((response) => {
        //请求后
        Indicator.close(); //隐藏loading
        return response
      })
    })
    // 获取资讯页的banner列表
    this.$http
      .get("/loansupermarket-app/information/getInformationBannar")
      .then(function(response) {
        this.bannerList = response.body.data;
      });
    // 刚进入页面获取资讯列表
    this.$http
      .get(
        "/loansupermarket-app/information/getInformationList?pageNum=" +
          1 +
          "&pageSize=" +
          6
      )
      .then(response => {
        var resBody = response.body;
        if (resBody.code == "000") {
          this.selectedList = resBody.data;
          if (this.selectedList.length < 6) {
            this.noMoreShow = true;
          }
          // 时间戳转成2018-10-08格式
          this.selectedList.forEach(function(item, index) {
            item.create_time = util.formatDate(item.create_time, "YYYY-MM-DD");
          });
        } else {
          MessageBox.alert(resBody.mesg);
        }
      });
  },
  methods: {
    getList() {
      this.pageNum += 1;
      this.loadMoreShow = true;
      var _this = this;
      setTimeout(function() {
        _this.$http
          .get(
            "/loansupermarket-app/information/getInformationList?pageNum=" +
              _this.pageNum +
              "&&pageSize=6"
          )
          .then(response => {
            var resBody = response.body;
            if (resBody.code == "000") {
              _this.flag = true;
              _this.loadMoreShow = false;
              if (resBody.data.length < 6) {
                _this.noMoreShow = true;
                _this.flag = false;
              } else {
                _this.flag = true;
              }
              _this.selectedList = _this.selectedList.concat(resBody.data);        
            } else {
              MessageBox.alert(resBody.mesg);
            }
          });
      }, 500);
    },
    goArtical(id) {
      var token = commons.getCookie("token");
      let postData = {
        visitType: 1,
        informationId: id,
        token: token,
        channel: window.sessionStorage.getItem("channel")
          ? window.sessionStorage.getItem("channel")
          : ""
      };
      this.$http
        .post(
          "/loansupermarket-app/information/insertInformationVisit",
          postData
        )
        .then(function(response) {
          window.location.href = "./article.html?id=" + id;
        });
    },
    goBanner(url) {
      window.location.href = url;
    },
    goPage(url, idx) {
      window.location.href = "./method.html?indexa=" + idx;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../../scss/base.scss";
.discover {
  margin-bottom: 1.8rem;
  &-header {
    width: 100%;
    height: 1.2rem;
    text-align: center;
    background: -webkit-linear-gradient(bottom, #2ce9e8, #7dd7ff);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    &-inner {
      height: 0.76rem;
      width: 5.4rem; // border: 2px solid #fff;
      position: absolute;
      transform: translate(-50%, -50%);
      border-radius: 0.12rem;
      left: 50%;
      top: 50%;
      &-left {
        width: 48%;
        float: left;
        line-height: 0.76rem;
        border-radius: 0.12rem 0 0 0.12rem;
        border-left: 1px solid #fff;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        font-size: 0.42rem;
        color: #fff;
      }
      &-right {
        width: 48%;
        float: left;
        line-height: 0.76rem;
        border-radius: 0 0.12rem 0.12rem 0;
        border-right: 1px solid #fff;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        color: #fff;
        font-size: 0.42rem;
      }
      .active {
        background: #fff;
        color: #48d8db;
      }
    }
  }
}
.selectedA {
  margin-bottom: 1.8rem;
  .weui-loadmore_line {
    margin-top: 0.6rem;
  }
  &-header {
    width: 100%;
    height: 1.2rem;
    background: -webkit-linear-gradient(bottom, #2ce9e8, #7dd7ff);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;

    &-inner {
      height: 0.76rem;
      width: 5.4rem; // border: 2px solid #fff;
      position: absolute;
      transform: translate(-50%, -50%);
      border-radius: 0.12rem;
      left: 50%;
      top: 50%;
      &-left {
        width: 48%;
        float: left;
        line-height: 0.76rem;
        border-radius: 0.12rem 0 0 0.12rem;
        border-left: 1px solid #fff;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        font-size: 0.42rem;
        color: #fff;
      }
      &-right {
        width: 48%;
        float: left;
        line-height: 0.76rem;
        border-radius: 0 0.12rem 0.12rem 0;
        border-right: 1px solid #fff;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        color: #fff;
        font-size: 0.42rem;
      }
      .active {
        background: #fff;
        color: $primaryColor;
      }
    }
  }
  &-banner {
    width: 100%;
    height: 4rem;
    margin-top: 1.2rem;
    position: relative;
    .mint-swipe {
      width: 100%;
      height: 100%;
      position: relative;
      .mint-swipe-indicators {
        bottom: 3rem !important;
        display: none;
        background: red;
      }
      .mint-swipe-item {
        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    &-nav {
      width: 9.18rem;
      height: 2.26rem;
      background: #fff;
      position: absolute;
      top: 3.44rem;
      left: 0.4rem;
      border-radius: 0.07rem;
      box-shadow: 0px 8px 17px #effcfc;
      ul {
        li {
          float: left;
          width: 25%;
        }
      }
      &-img {
        width: 100%;
        img {
          width: 0.72rem;
          height: 0.7rem;
          margin-top: 0.4rem;
        }
        height: 1.48rem;
      }
      p {
        font-size: 0.34rem;
      }
    }
  }
  &-discussSelected {
    margin-top: 2.1rem;
    font-size: 0.4rem;
    font-weight: bold;
    margin-bottom: 0.4rem;
  }
  &-content {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.4rem;
    background: #fff;
    padding-bottom: 0.4rem;
    &-item {
      box-sizing: border-box;
      padding-top: 0.4rem;
      width: 100%;
      height: 3.17rem;
      display: flex;
      &-left {
        width: 3.6rem;
        height: 100%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      &-right {
        width: 5.32rem;
        height: 100%;
        margin-left: 0.27rem;
        text-align: left;
        border-bottom: 1px solid $borderColor;
        position: relative;
        p {
          font-size: 0.4rem; // height: 0.7rem;
          line-height: 0.7rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        span {
          line-height: 0.5rem;
          font-size: 0.25rem;
        }
        div {
          position: absolute;
          bottom: 0.2rem;
          left: 0rem;
          font-size: 0.4rem; // margin-top: 0.83rem;
          img {
            width: 0.4rem;
            height: auto;
            vertical-align: -8%;
          }
        }
      }
    }
  }
  &-goTop {
    box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.2);
    position: fixed;
    bottom: 2rem;
    width: 1.5rem;
    height: 1.5rem;
    background: #fff;
    text-align: center;
    line-height: 1.5rem;
    border-radius: 50%;
    right: 0.5rem;
    animation: myfirst 1.5s infinite linear;
    i {
      font-size: 0.8rem;
      color: $primaryColor;
    }
  }
  .flex-demo {
    text-align: center;
    color: #fff;
    background-color: #20b907;
    border-radius: 4px;
    background-clip: padding-box;
  }
}
.opera-group {
  @include flexContainer;
  justify-content: space-between;
  margin-top: 0.2rem;
  color: $grayColor;
  &-item {
    @include flexItem;
  }
  &-time {
  }
  &-view {
    // background: url($url+"/static/img/icon32/liulanliang@2x.png") no-repeat 0 1px;
    background: url("../../../assets/icon/liulanliang@2x.png") no-repeat 0 1px;
  }
  &-zan {
    background: url("../../../assets/icon/dianzan@2x.png") no-repeat;
  }
  &-sc {
    background: url("../../../assets/icon/guanzhu@2x.png") no-repeat;
  }
  &-icon {
    background-size: 0.4rem;
    text-indent: 0.5rem;
  }
}
.selectedA {
  margin-bottom: 1.8rem;
  .weui-loadmore_line {
    margin-top: 0.6rem;
  }
  &-header {
    width: 100%;
    height: 1.2rem;

    background: -webkit-linear-gradient(bottom, #2ce9e8, #7dd7ff);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;

    &-inner {
      height: 0.76rem;
      width: 5.4rem; // border: 2px solid #fff;
      position: absolute;
      transform: translate(-50%, -50%);
      border-radius: 0.12rem;
      left: 50%;
      top: 50%;
      &-left {
        width: 48%;
        float: left;
        line-height: 0.76rem;
        border-radius: 0.12rem 0 0 0.12rem;
        border-left: 1px solid #fff;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        font-size: 0.42rem;
        color: #fff;
      }
      &-right {
        width: 48%;
        float: left;
        line-height: 0.76rem;
        border-radius: 0 0.12rem 0.12rem 0;
        border-right: 1px solid #fff;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        color: #fff;
        font-size: 0.42rem;
      }
      .active {
        background: #fff;
        color: $primaryColor;
      }
    }
  }
  &-banner {
    width: 100%;
    height: 4rem;
    margin-top: 1.2rem;
    position: relative;
    .mint-swipe {
      width: 100%;
      height: 100%;
      position: relative;
      .mint-swipe-indicators {
        bottom: 3rem !important;
        display: none;
        background: red;
      }
      .mint-swipe-item {
        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    &-nav {
      width: 9.18rem;
      height: 2.26rem;
      background: #fff;
      position: absolute;
      top: 3.44rem;
      left: 0.4rem;
      border-radius: 0.07rem;
      box-shadow: 0px 8px 17px #effcfc;
      ul {
        li {
          float: left;
          width: 25%;
        }
      }
      &-img {
        width: 100%;
        img {
          width: 0.72rem;
          height: 0.7rem;
          margin-top: 0.4rem;
        }
        height: 1.48rem;
      }
      p {
        font-size: 0.34rem;
      }
    }
  }
  &-discussSelected {
    margin-top: 2.1rem;
    font-size: 0.4rem;
    font-weight: bold;
    margin-bottom: 0.4rem;
  }
  &-content {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.4rem;
    background: #fff;
    padding-bottom: 0.4rem;
    .selectedA-container-title {
      @include textOverflow(2);
      height: 1rem;
      line-height: 0.5rem;
      font-size: 0.4rem;
      color: $titleColor;
    }
    .selectedA-container-word {
      @include textOverflow(2);
      height: 1rem;
      line-height: 0.5rem;
      font-size: 0.35rem;
      color: $grayColor;
    }
    &-item {
      box-sizing: border-box;
      padding-top: 0.4rem;
      width: 100%;
      height: 3.17rem;
      display: flex;
      &-left {
        width: 3.6rem;
        height: 100%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      &-right {
        width: 5.32rem;
        height: 100%;
        margin-left: 0.27rem;
        text-align: left;
        border-bottom: 1px solid $borderColor;
        position: relative;
        p {
          font-size: 0.3rem; // height: 0.7rem;
          line-height: 0.7rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        span {
          line-height: 0.5rem;
          font-size: 0.25rem;
        }
        div {
          position: absolute;
          bottom: 0.2rem;
          left: 0rem;
          font-size: 0.4rem; // margin-top: 0.83rem;
          img {
            width: 0.4rem;
            height: auto;
            vertical-align: -8%;
          }
        }
      }
    }
  }
  &-goTop {
    box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.2);
    position: fixed;
    bottom: 2rem;
    width: 1.5rem;
    height: 1.5rem;
    background: #fff;
    text-align: center;
    line-height: 1.5rem;
    border-radius: 50%;
    right: 0.5rem;
    animation: myfirst 1.5s infinite linear;
    i {
      font-size: 0.8rem;
      color: $primaryColor;
    }
    @-webkit-keyframes myfirst {
      0% {
        right: 0.2rem;
      }
      50% {
        right: 0.5rem;
      }
      100% {
        right: 0.2rem;
      }
    }
  }
}
</style>
